/**
 * 
 */
<template>
  <div id="qmviewer_container" style="height: 100%">
    <qmviewer
      v-bind:modelName="modelName"
      v-bind:isCompont="isCompont"
      v-bind:isLocal="isLocal"
      @callFather_loaded="callFather_loaded"
    ></qmviewer>
    <!-- <div ref="svg1" style="position: absolute; width: 100%; height: 100%"></div> -->
    <transition class="move_root">
      <!--    绑定style中top和left-->
      <div id="popupDiv" class="moveBox" :style="position" v-show="show">
        <div
          class="moveHead"
          @mousedown="mousedown"
          @mousemove="mousemove"
          @mouseup="mouseup"
          @mouseleave="mousemove"
        >
          {{ title }}
        </div>
        <!--      关闭按钮-->
        <div class="close" @click="toggleShow()">X</div>
        <div class="content">
          <!--插槽-->
          <slot>
            <p>点击构件弹出div显示窗口</p>
            <button
              type="button"
              class="el-button el-button--primary el-button--small"
              @click="onSetMark()"
            >
              添加文字标签
            </button>
            <button
              type="button"
              class="el-button el-button--primary el-button--small"
              @click="onLookatCamera()"
            >
              定位到指定位置
            </button>
            <button
              type="button"
              class="el-button el-button--primary el-button--small"
              @click="onCreateMark()"
            >
              添加标记
            </button>
            <button
              type="button"
              class="el-button el-button--primary el-button--small"
              @click="onClearMark()"
            >
              清除标记
            </button>
            <button
              type="button"
              class="el-button el-button--primary el-button--small"
              @click="onlookat()"
            >
              聚焦一个构件
            </button>
            <button
              type="button"
              class="el-button el-button--primary el-button--small"
              @click="onLookatBox()"
            >
              聚焦一组构件
            </button>
            <button
              type="button"
              class="el-button el-button--primary el-button--small"
              @click="onAddDom()"
            >
              插入自定义标签
            </button>
                  <button
              type="button"
              class="el-button el-button--primary el-button--small"
              @click="onInsert3Dmark()"
            >
              插入3D标签
            </button>
            <!-- <button
              type="button"
              class="el-button el-button--primary el-button--small"
              @click="onMove()"
            >
              标签随灯往上移
            </button> -->
          </slot>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import qmviewer from "../../components/qmviewer";
import "../../css/lable.css";
//import SVG from "@svgdotjs/svg.js";
//import { QmAnnotation } from "../../components/bimjs/qm.drawmark.js";
export default {
  name: "Demo1",
  data() {
    return {
      //你需要打开的模型名称放这里。
    //  modelName: "rac_basic_sample_project.rvt",
      modelName: "/static/localmodel/" + "1741261413516101",
      isLocal: true,
      isCompont: true,
      //移动窗体的属性
      title: "常规示例操作11",
      show: true, //是否显示
      x: 300, //left:x
      y: 60, //top:y
      leftOffset: 0, //鼠标距离移动窗口左侧偏移量
      topOffset: 0, //鼠标距离移动窗口顶部偏移量
      isMove: false, //是否移动标识
      //标签
      domMap: new Map(),
      qmodel_container: null,
    };
  },
  // 注册组件
  components: {
    qmviewer,
  },
  /**
   * 数据发生改变
   */

  /**
   * 创建完毕
   */
  beforeCreate() {},
  created() {
    //console.log(this._data);
  },
  computed: {
    //top与left加上px
    position() {
      return `top:${this.y}px;left:${this.x}px;`;
    },
  },
  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    // 模型加载完成事件
    callFather_loaded(parm) {
      var _this = this;
      _this.qmodel_container = document.getElementById("qmviewer_container");
      // debugger;
      // var qmmark = new QmAnnotation(SVG, this.$refs.svg1, {
      //   width: _this.qmodel_container.clientWidth,
      //   height: _this.qmodel_container.clientHeight,
      // });
      // qmmark.stopDraw();
      //初始化位置不好，先定位到指定位置
      qmodel.set_camera_json(
       '{"eye":{"x":133.826088000602,"y":2241.178812604987,"z":91.03382419319614},"center":[119.58199025603538,2218.813558515304,72.77851443050918],"up":{"x":0,"y":0,"z":1},"rotation":{"isEuler":true,"_x":-0.8862339156044707,"_y":0.45834744950851325,"_z":2.7950132287610856,"_order":"XYZ"},"target":{"x":119.58199025603538,"y":2218.813558515304,"z":72.77851443050918}}' 
      );

      //通常情况下，qmodel是个全局变量，qmodel可直接使用。
      qmodel.set_mark_click_callback(function (cmpId, markId, pngIndex) {
        if (markId == "26e07856-3db3-4e08-b663-b1c55b23432") {
          console.log("已经绑定了的设备，弹出自己期望显示的业务");
          // clickOne();
          popupDiv.style.display = "block";
          popupDiv.style.left = document.body.clientWidth / 2 - 400 + "px";
        }
        if (markId == "26e07856-3db3-4e08-b663-b1c55b53f77a" ) {
          qmodel.set_camera_json(
'{"eye":{"x":144.64458222638794,"y":2211.3353692751816,"z":94.13433329241184},"center":[114.24605323446771,2221.528059746435,72.77851443050918],"up":{"x":0,"y":0,"z":1},"rotation":{"isEuler":true,"_x":0.4453064045721116,"_y":0.9093389541137158,"_z":1.0268243356671265,"_order":"XYZ"},"target":{"x":114.24605323446771,"y":2221.528059746435,"z":72.77851443050918}}'          );
        }
        if (markId =="6a5d17e4-b2ff-4730-be1f-c331b26bd120") {
          qmodel.set_camera_json(
'{"eye":{"x":126.48087259341469,"y":2205.4136969813585,"z":99.8543987310094},"center":[116.50274441824335,2230.9355689864333,72.77851443050918],"up":{"x":0,"y":0,"z":1},"rotation":{"isEuler":true,"_x":0.755861535505532,"_y":0.2620037775307772,"_z":0.26816894791687573,"_order":"XYZ"},"target":{"x":116.50274441824335,"y":2230.9355689864333,"z":72.77851443050918}}'          );
        }
        qmodel.remove_mark_byid(markId);
      });
      qmodel.set_select_callback(function (id) {
        var cmps = JSON.parse(id);
        console.log(cmps);
        if (cmps.cmpid == "*1741261413516101^0^89d4b3d8-65e7-4c45-bf9c-19b429047a07-004881dd") {
          console.log("已经绑定了的设备，弹出自己期望显示的业务");
          // clickOne();
          popupDiv.style.display = "block";
          popupDiv.style.left = document.body.clientWidth / 2 - 400 + "px";
        }
      });
      qmodel.set_mark_mouse_callback(function (
        cmpId,
        markId,
        pngIndex,
        position,
        inorout
      ) {
        if (inorout == "in")
          console.log(
            "鼠标进来了，pngIndex=" +
              pngIndex +
              ",cmpId=" +
              cmpId +
              ",markId=" +
              markId +
              "position=" +
              JSON.stringify(position)
          );
        else console.log("鼠标出去了");
      });
      qmodel.set_dommove_call(function (data) {
        //    console.log(data);

        data.forEach((element) => {
          var d = _this.domMap.get(element.id);
          var qmodel_container = _this.qmodel_container;
          if (
            element.position2.x > 0 &&
            element.position2.x < qmodel_container.clientWidth &&
            element.position2.y > 0 &&
            element.position2.y < qmodel_container.clientHeight
          )
            d.style.display = "block";
          else d.style.display = "none";
          d.style.left =
            element.position2.x + qmodel_container.offsetLeft - 165 + "px";
          d.style.top =
            element.position2.y + qmodel_container.offsetTop - 250 + "px";
        });
      });
    },
    onLookatCamera() {
      qmodel.set_camera_json(
        '{"eye":{"x":133.6674255903389,"y":2228.414288357792,"z":93.85559330427954},"center":[117.14079485360035,2217.579067864249,78.09798220603969],"up":{"x":0,"y":0,"z":1},"rotation":{"isEuler":true,"_x":-0.6023676183602339,"_y":0.7126860688497989,"_z":2.381347683249321,"_order":"XYZ"},"target":{"x":117.14079485360035,"y":2217.579067864249,"z":78.09798220603969}}'
    );
    },
    onCreateMark() {
      qmodel.reset_marks(
        '[{"rid":"*1741261413516101^0^1ae4f181-8051-47d4-b212-6614b294560d-00484d43","position":[120.68651384575125,2220.756885157541,80.90550994873047],"pngNum":6,"markId":"c06e9566-1c04-4027-850c-4970b9edd428"}]'
      );
    },
    onClearMark() {
      qmodel.remove_all_marks();
    },
    onMove() {
      var start = { x:15.412470938370802,y:2.0725881652827116,z:28.588106499498366 };
      var end = { x: 6, y: -1, z: 40 };
      //start可以不传，表示在原始的位置出发。这个位置可以通过鼠标点击获取一个大概，相对原点的距离单位是英尺
      qmodel.set_animation(
        null,
        end,
        5,
        false,
        "*1723^0^4269d745-d78a-4cca-860f-a55b170715ad-000775b1",
        0xff0000
      );
    },
    onInsert3Dmark(){
       const element = document.createElement('div');
        element.className = 'element';
        element.style.backgroundColor = 'rgba(0,127,127,' + (Math.random() * 0.5 + 0.25) + ')';

        const number = document.createElement('div');
        number.className = 'number';
        number.textContent = Math.floor(Math.random() * 1000);;
        element.appendChild(number);

        const symbol = document.createElement('div');
        symbol.className = 'symbol';
        symbol.textContent = 'QMODEL';
        element.appendChild(symbol);

        const details = document.createElement('div');
        details.className = 'details';
        details.innerHTML ='这是一个可缩放三维标签';
        element.appendChild(details);
        var point={x: 126.60761260986328, y: 2219.3029131775374, z: 75.37574460159476};
        var normal={x: 1, y: 0, z: 0};
        var markId='5648fa6s5d4fe8eee';
        qmodel.insert_3d_Mark(point,normal,element,markId);
    },
    onlookat() {
      qmodel.lookat_comp("*1741261413516101^0^1ae4f181-8051-47d4-b212-6614b294560d-00484bbb");
    },
    onLookatBox() {
      var a = qmodel.get_cmps_box3(
["*1741261413516101^0^1ae4f181-8051-47d4-b212-6614b294560d-004856d7","*1741261413516101^0^89d4b3d8-65e7-4c45-bf9c-19b429047a07-00488103","*1741261413516101^0^89d4b3d8-65e7-4c45-bf9c-19b429047a07-004880f6"]      );
      qmodel.lookat_box(a, true);
    },
    onAddDom() {
      var domMap = this.domMap;
      qmodel.set_camera_json(
'{"eye":{"x":135.31947194926232,"y":2234.4922963816284,"z":84.14834069706423},"center":[127.98921668968111,2227.986052188069,81.12403046570535],"up":{"x":0,"y":0,"z":1},"rotation":{"isEuler":true,"_x":-1.1356768292219992,"_y":0.79611550190243,"_z":2.820871881123826,"_order":"XYZ"},"target":{"x":127.98921668968111,"y":2227.986052188069,"z":81.12403046570535}}'      );
      var markInfos = [];
      markInfos.push({
        id: "mark-1",
        AName: "文字说明1",
        AValue: "LD-AS-033",
        position: {"x":127.98921668968111,"y":2227.986052188069,"z":81.12403046570535},
      });
      markInfos.push({
        id: "mark-2",
        AName: "文字说明2",
        AValue: "DZ-AS-034",
        position: {"x":124.24349928751865,"y":2224.9054218210613,"z":81.13758528989626},
      });
      var testMarkMove ="*1741261413516101^0^89d4b3d8-65e7-4c45-bf9c-19b429047a07-0048819d";
      markInfos.forEach((p) => {
        var dom = document.createElement("div");

        dom.style =
          "z-index:11;user-select: none;  width: 154px; height: 100px; left: 302.873px; top: 154.002px; position: absolute;";
        var dom2 = document.createElement("div");
        dom2.style = "color:#000";
        dom.appendChild(dom2);
        dom2.innerHTML =
          '<div class="LabelTemplate1">' +
          '<div class="topview"></div><div class="content name">' +
          p.AName +
          '</div><div class="content value">' +
          p.AValue +
          '</div><div class="Icon"></div></div>';
        document.getElementById("qmviewer_container").appendChild(dom);
        domMap.set(p.id, dom);
        var e = qmodel.add_dom_mark(p.id, p.position, testMarkMove);
        testMarkMove = null;
        var d = domMap.get(p.id);
        d.style.left = e.x + "px";
        d.style.top = e.y + "px";
        d.style.position = "absolute";
      });
    },
    onSetMark() {
      qmodel.set_mark(
        '[{"rid":"*1741261413516101^0^41aaf2b2-c662-47a8-bd9c-a508810d09b4-004863c4","position":[119.74615556166341,2209.179871102393,80.052490234375],"pngNum":7,"markId":"6a5d17e4-b2ff-4730-be1f-c331b26bd120"}]',
        "产品生命周期管理（product lifecycle management，PLM）"
      );

      qmodel.set_mark(
        ' [{"rid":"0^d85573c2-f8d5-46ae-966a-ac82fa18f500-000664a1","position":[118.25584745995084,2220.4646721927015,81.0367431640625],"pngNum":12,"markId":"26e07856-3db3-4e08-b663-b1c55b53f77a"}]',
        "QModel越来越好！！！"
      );
      qmodel.set_mark(
        ' [{"rid":"*1741261413516101^0^1ae4f181-8051-47d4-b212-6614b294560d-00485849","position":[124.09647351878117,2226.7744762613916,82.72860784314976],"pngNum":12,"markId":"26e07856-3db3-4e08-b663-b1c55b23432"}]',
        "QModel标签点击弹窗"
      );
    },
    // 关闭编辑、增加弹出框
    closeDialog() {},
    //控制打开关闭
    toggleShow(data) {
      this.x = 100;
      this.y = 50;

      this.show = !this.show;
    },
    mousedown(event) {
      //鼠标按下事件
      this.leftOffset = event.offsetX;
      this.topOffset = event.offsetY;
      this.isMove = true;
    },
    //鼠标移动
    mousemove(event) {
      if (!this.isMove) {
        return;
      }
      this.x = event.clientX - this.leftOffset;
      this.y = event.clientY - this.topOffset;
    },
    //鼠标抬起
    mouseup() {
      this.isMove = false;
    },
  },
};
</script>
<style scoped>
.moveBox {
  width: 500px;
  height: 300px;
  position: fixed;
  z-index: 99998;
  background: rgb(255, 255, 255);
  box-shadow: 0 0 5px 3px #95a5a6;
}
.moveBox .moveHead {
  height: 35px;
  background-color: rgb(51, 65, 87);
  cursor: move;
  color: #fff;
  padding: 9px 0 0 11px;
}
.moveBox .close {
  position: absolute;
  right: 0;
  top: 0;
  line-height: 30px;
  font-size: 24px;
  cursor: pointer;
  display: block;
  width: 30px;
  height: 30px;
  text-align: center;
  color: #fff;
}

.v-enter,
.v-leave-to {
  opacity: 0;
  transform: scale(0.5);
}
.content {
  padding: 10px;
}
.v-enter-active,
.v-leave-active {
  transition: all 0.5s ease;
}
</style>

 
 